<!--20210304    zaq    加入查询子组件-->
<!--20210309    zaq    新增按钮实现查询子组件的显示、隐藏-->

<template>
  <div class="list">
    <div>
      <el-button @click="showDialog(true)">显示</el-button>
      <el-button @click="showDialog(false)">隐藏</el-button>
      <select-list v-show="dialog_visible"></select-list>
    </div>

<!--    收支记录-->
    <el-table
        :data="list"
        style="width: 100%;margin: 0;padding: 0;"
        height="250"
        border>
      <el-table-column
          prop="number"
          label="金额"
          width="180">
      </el-table-column>
      <el-table-column
          v-if="list.flag==='1'"
          prop="支出"
          label="收入/支出"
          width="180">
      </el-table-column>
      <el-table-column
          v-else
          prop="收入"

          label="收入/支出"
          width="180">
      </el-table-column>
      <el-table-column
          prop="date"
          label="时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    分页-->
    <el-pagination
        style="width: 100%;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
    </el-pagination>
  </div>
</template>

<script>
import select_list from "@/components/book/Select_list";
export default {
  name: "List",
  data(){
    return {
      dialog_visible:false,
      currentPage: 4,
      list: [{
        number: '25.2',
        flag: '1',
        date: '20210302'
      },
        {
          number: '30',
          flag: '2',
          date: '20210106'
        },
        {
          number: '100',
          flag: '1',
          date: '20201227'
        }
      ]
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick(row) {
      console.log(row);
    },
    showDialog(visible){
      this.dialog_visible=visible
    }
  },
  components:{
    'select-list':select_list,//查询模块
  }
}
</script>

<style scoped>
.list{
  padding: 0;
  margin: 0;
  width: 100%;
}
</style>